<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>myChart</title>
    <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .head {
      height: 120px;
      padding: 10px 12px;
      box-sizing: border-box;
      margin: 15px 0;
    }

    .head>.box {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      background: -webkit-linear-gradient(left, #4381ff, #75a2fe);
      background: -o-linear-gradient(right, #4381ff, #75a2fe);
      background: -moz-linear-gradient(right, #4381ff, #75a2fe);
      background: linear-gradient(to right, #4381ff, #75a2fe);
      color: #fff;
      padding: 10px;
      box-sizing: border-box;
      position: relative;
    }

    .head .title {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
    }

    .head .progress {
      width: calc(100% - 22px);
      height: 6px;
      border: 1px solid #fff;
      border-radius: 3px;
      position: absolute;
      bottom: 10px;
    }

    .head .progress .bar {
      width: 0;
      height: 0;
      background-color: #fff;
      border-radius: 3px;
      box-shadow: 0 0 10px 1px #fff;
      transition: width 0.8s ease-out;
      position: relative;
    }

    .head .progress .bar .tag {
      display: block;
      width: 38px;
      height: 25px;
      line-height: 20px;
      text-align: center;
      background: url("./imgs/icon1.png") center/cover no-repeat;
      position: absolute;
      top: -26px;
      right: -38px;
      color: #4381ff;
      font-size: 13px;
    }

    .head .progress .bar .tag.left {
      background: url("./imgs/icon2.png") center/cover no-repeat;
      right: 0;
    }

    .main>div {
      position: relative;
      margin-top: 15px;
    }

    .main .year {
      position: absolute;
      text-align: center;
      width: 100%;
      font-weight: 900;
      color: #cedeff;
      opacity: 0.5;
      margin: 0;
      text-shadow: 2px 2px 5px #888888;
    }

    #myChart1,
    #myChart2 {
      margin: 0 auto;
      border-radius: 8px;
      box-shadow: 0 0 5px 3px rgba(74, 148, 224, 0.2);
    }


    </style>
    <script src="./echart/echarts.common.min.js"></script>
</head>

<body>
<div class="head">
    <div class="box">
        <div class="title">
            <span>已办工单</span>
            <span>待办工单</span>
        </div>
        <div class="progress">
            <div class="bar" id="progressBar">
                <span class="tag" id="tag"></span>
            </div>
        </div>
    </div>
</div>
<div class="main">
    <div>
        <p class="year" id="year1"></p>
        <div id="myChart1"></div>
    </div>
    <div>
        <p class="year" id="year2"></p>
        <div id="myChart2"></div>
    </div>
</div>
</body>

</html>
<script>
  var myChart1 = document.getElementById("myChart1");
  var myChart2 = document.getElementById("myChart2");
  var year1 = document.getElementById("year1");
  var year2 = document.getElementById("year2");
  var progressBar = document.getElementById("progressBar");
  var tag = document.getElementById("tag");

  function createChart(chart, year) {
    chart.style.width = (screen.width - 24) + "px";
    chart.style.height = Math.floor((screen.width - 24) * 0.7) + "px";
    year.style.fontSize = Math.floor(screen.width / 5) + "px";
    year.style.lineHeight = Math.floor((screen.width - 24) * 0.7) + 30 + "px";
    return echarts.init(chart);
  }
  var newChart1 = createChart(myChart1, year1);
  var newChart2 = createChart(myChart2, year2);
  var options = {
    title: {
      textStyle: {
        color: "#407fff",
        fontSize: 15,
        fontWeight: "normal"
      },
      top: 5,
      left: 5,
    },
    color: ["#ff4064", "#538cff", "#59ad59"],
    legend: {
      right: 5,
      top: 5,
      itemWidth: 9,
      itemHeight: 9,
      formatter: function (name) {
          var name = name.replace(/\S{5}/g, function (match) {
                                  if (name.length % 5 === 0 && match === name.substring(name.length - 5)) {
                                  return match;
                                  }
                                  return match + "\n";
                                  });
                                  return name;
      }
    },
    grid: {
      top:65,
      right: 10,
      bottom: 30,
    },
    xAxis: {
      type: "category",
      splitLine: {
        show: true
      },
      data: ["第一周", "第二周", "第三周", "第四周", "第五周"]
    },
    yAxis: {
      type: "value",
      min: 0
    },
    series: [{
        type: "bar",
        barWidth: 2,
        barGap: 3,
        smooth: true,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "top",
              color: "#fff",
              backgroundColor: "#ff4064",
              padding: [2, 5],
              borderRadius: 4
            }
          }
        }
      },
      {
        type: "bar",
        barWidth: 2,
        barGap: 3,
        smooth: true,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "top",
              color: "#fff",
              backgroundColor: "#538cff",
              padding: [2, 5],
              borderRadius: 4
            }
          }
        }
      },
      {
        type: "bar",
        barWidth: 2,
        barGap: 3,
        smooth: true,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "top",
              color: "#fff",
              backgroundColor: "#59ad59",
              padding: [2, 5],
              borderRadius: 4
            }
          }
        }
      }
    ]
  }
  newChart1.setOption(options);
  newChart2.setOption(options);

  function drawChart(val) {
    var data = JSON.parse(val);
    var firstData = data.first;
    var secondData = data.second;
    // 更新进度条
    if (data.progress != 0) {
      progressBar.style.height = "100%";
      progressBar.style.width = data.progress * 100 + "%";
      if (data.progress * 100 <= 88) {
        tag.classList.remove("left");
      } else {
        tag.classList.add("left");
      }
      var num = 0;
      var timerId = setInterval(function () {
        if (num < data.progress * 100) {
          num++;
          tag.innerText = num + "%"
        } else {
          clearInterval(timerId);
        }
      }, (8 / data.progress));
    } else {
      progressBar.style.height = 0;
      tag.innerText = "0%";
    }

    // 获取年份
    var today = new Date();
    year1.innerText = today.getFullYear();
    year2.innerText = today.getFullYear();
    // 设置echarts图表数据
    var legend1 = firstData.legend;
    var legend2 = secondData.legend;
    var series1 = firstData.series.map(function (item,index) {
      var seriesData = {};
      seriesData.name = legend1.data[index];
      seriesData.data = item;
      return seriesData;
    });
    var series2 = secondData.series.map(function (item,index) {
      var seriesData = {};
      seriesData.name = legend2.data[index];
      seriesData.data = item;
      return seriesData;
    });
    newChart1.setOption({
      title: {
        text: firstData.title
      },
      legend: firstData.legend,
      series: series1
    });
    newChart2.setOption({
      title: {
        text: secondData.title
      },
      legend: secondData.legend,
      series: series2
    });
  }


</script>
